<template>
  <div class="interview-records-container">
    <div class="page-header">
      <h2>面试全流程记录</h2>
      <p class="subtitle">查看您的面试进度和结果</p>
    </div>

    <a-spin :spinning="loading" tip="加载数据中...">
      <div v-if="recordList && recordList.length > 0" class="records-content">
        <a-card
          v-for="record in recordList"
          :key="record.id"
          class="record-card"
          :class="{ 'success-card': record.step === 4 }"
        >
          <div class="card-content">
            <div class="record-header">
              <div class="company-info">
                <h3>{{ record.company }}</h3>
                <div class="position-info">
                  <span class="position-label">{{ record.position }}</span>
                  <a-tag color="blue">{{ record.techField }}</a-tag>
                </div>
              </div>
              <div class="record-status">
                <a-tag :color="getStatusColor(record.step)">{{ getStatusText(record.step) }}</a-tag>
                <div class="record-time">申请时间: {{ formatDate(record.createTime) }}</div>
              </div>
            </div>

            <a-divider />

            <div class="process-timeline">
              <a-steps :current="getCurrentStep(record.step)" size="small">
                <a-step title="简历筛选" :status="getStepStatus(record.step, 0)" />
                <a-step title="笔试" :status="getStepStatus(record.step, 1)" />
                <a-step title="技术面试" :status="getStepStatus(record.step, 2)" />
                <a-step title="HR面试" :status="getStepStatus(record.step, 3)" />
                <a-step title="Offer" :status="getStepStatus(record.step, 4)" />
              </a-steps>
            </div>

            <div class="record-actions">
              <div class="action-buttons">
                <a-button
                  v-if="record.step >= 0"
                  type="primary"
                  size="small"
                  @click="viewAnalysisReport(record)"
                >
                  查看分析报告
                </a-button>
                <a-popconfirm
                  title="确定要删除这条记录吗？"
                  ok-text="确定"
                  cancel-text="取消"
                  @confirm="deleteRecord(record)"
                >
                  <a-button type="primary" danger size="small" style="margin-left: 8px">
                    删除
                  </a-button>
                </a-popconfirm>
              </div>
            </div>
          </div>
        </a-card>
      </div>

      <a-empty v-else description="暂无面试记录" />
    </a-spin>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import {
  Card as ACard,
  Steps as ASteps,
  Step as AStep,
  Button as AButton,
  Tag as ATag,
  Divider as ADivider,
  Empty as AEmpty,
  Spin as ASpin,
  message,
  Popconfirm as APopconfirm,
} from 'ant-design-vue'
import {
  deleteFullProcessInterviewUsingGet,
  getFullProcessInterviewListUsingGet
} from '@/api/fullInterviewController'

const router = useRouter()
const loading = ref(false)

// 面试记录列表
const recordList = ref([])

/**
 * 格式化日期
 * @param dateString 日期字符串
 * @returns 格式化后的日期字符串
 */
const formatDate = (dateString: string) => {
  const date = new Date(dateString)
  return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(
    date.getDate()
  ).padStart(2, '0')}`
}

/**
 * 获取状态文本
 * @param step 当前步骤
 * @returns 状态文本
 */
const getStatusText = (step: number) => {
  switch (step) {
    case 0:
      return '简历筛选未通过'
    case 1:
      return '笔试未通过'
    case 2:
      return '技术面未通过'
    case 3:
      return 'HR面未通过'
    case 4:
      return '获得Offer'
    default:
      return '未知状态'
  }
}

/**
 * 获取状态颜色
 * @param step 当前步骤
 * @returns 颜色代码
 */
const getStatusColor = (step: number) => {
  switch (step) {
    case 0:
    case 1:
    case 2:
    case 3:
      return 'error'
    case 4:
      return 'success'
    default:
      return 'default'
  }
}

/**
 * 获取当前步骤
 * @param step 当前步骤
 * @returns 当前步骤索引
 */
const getCurrentStep = (step: number) => {
  if (step === 4) return 4 // Offer
  return step // 失败的步骤
}

/**
 * 获取步骤状态
 * @param currentStep 当前步骤
 * @param stepIndex 步骤索引
 * @returns 步骤状态
 */
const getStepStatus = (currentStep: number, stepIndex: number) => {
  if (currentStep === 4) {
    // 全部通过的情况
    return stepIndex <= 4 ? 'finish' : 'wait'
  } else {
    // 某个步骤失败的情况
    if (stepIndex < currentStep) return 'finish'
    if (stepIndex === currentStep) return 'error'
    return 'wait'
  }
}

/**
 * 查看分析报告
 * @param record 面试记录
 */
const viewAnalysisReport = (record: any) => {
  if (record.step === 0) {
    router.push(`/api/analyze/resume?id=${record.resumeId}`)
  } else if (record.step === 1) {
    router.push(`/api/written/analyze?examId=${record.examId}`)
  } else if (record.step === 2) {
    router.push(`/api/tec/analyze?id=${record.aiInterviewId}`)
  } else if (record.step === 3) {
    router.push(`/api/hr/interview/analyze?id=${record.hrInterviewId}`)
  } else if (record.step === 4) {
    router.push(`/api/full/interview/analyze?id=${record.id}`)
  }
}

/**
 * 删除面试记录
 * @param record
 */
const deleteRecord = async (record: any) => {
  const res = await deleteFullProcessInterviewUsingGet({fullProcessInterviewId: record.id})
  if (res.code === 0) {
    message.success('删除面试记录成功')
    // 重新加载数据
    await fetchInterviewRecords()
  } else {
    message.error('删除面试记录失败: ' + (res.message || '未知错误'))
  }
}

/**
 * 获取面试记录列表
 */
const fetchInterviewRecords = async () => {
  loading.value = true
  try {
    // 使用API获取数据
    const response = await getFullProcessInterviewListUsingGet()

    if (response.code === 0 && response.data) {
      recordList.value = response.data as any
    } else {
      message.error('获取面试记录失败: ' + (response.message || '未知错误'))
    }
  } catch (error) {
    console.error('获取面试记录失败:', error)
    message.error('获取面试记录失败，请稍后重试')
  } finally {
    loading.value = false
  }
}

onMounted(() => {
  fetchInterviewRecords()
})
</script>

<style scoped>
.interview-records-container {
  padding: 24px;
  background-color: #f5f5f5;
  min-height: 100vh;
}

.page-header {
  margin-bottom: 24px;
}

.page-header h2 {
  font-size: 24px;
  color: #333;
  margin-bottom: 8px;
}

.subtitle {
  color: #666;
  font-size: 14px;
}

.records-content {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.record-card {
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  transition: all 0.3s;
  min-height: 250px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background-color: #fff;
}

.record-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
  transform: translateY(-2px);
}

.success-card {
  border: 1px solid #52c41a;
}

.card-content {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.record-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.company-info h3 {
  font-size: 18px;
  margin-bottom: 8px;
  color: #333;
}

.position-info {
  display: flex;
  align-items: center;
  gap: 8px;
}

.position-label {
  font-weight: 500;
  color: #666;
}

.record-status {
  text-align: right;
}

.record-time {
  margin-top: 8px;
  font-size: 12px;
  color: #999;
}

.process-timeline {
  margin: 20px 0;
  flex-grow: 1;
}

.record-actions {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: auto;
}

.action-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin-bottom: 16px;
}

.success-message {
  margin-top: 16px;
  text-align: center;
}

@media (max-width: 768px) {
  .interview-records-container {
    padding: 16px;
  }

  .record-header {
    flex-direction: column;
    gap: 12px;
  }

  .record-status {
    text-align: left;
  }
}
</style>
